<template>
  <div>
    <div class="comment-wrap">
      <div class="content">
        <div class="Htitle">{{detail.title}}</div>
        <div class="comment">
          <div class="problem">
            <div class="user">{{detail.user}}</div>
            <p class="user-problem">{{detail.problem}}</p>
          </div>
          <div class="company">
            <img src="../../../static/images/Reply.png" alt="">
            {{detail.compony}}
          </div>
          <p class="title">{{detail.content}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatTime } from "@/utils/index";
import card from "@/components/card";

export default {
  components: {
    card
  },

  data() {
    return {
      detail:{
          title:'人民银行答网民关于“建议企业在开户、账户年检时只提交营业执照副本”的留言',
          user:"清风徐来 来自新乡的网民",
          problem:'人民银行要求企业在开户、账户年检时提交营业执照副本，建议改为只要提交副本，因为“正负副本具有同样的法律效益”',
          compony:'人民银行',
          content:'庄子与弟子走到一座山脚下，看见一株大树，枝繁叶茂，耸立在大溪旁。庄子问伐木者，这么高大的树木，怎么没人砍伐。伐木者似对此树不屑一顾，道：“这何足为奇？此树是一种不中用的木材。用来作舟船，则沉于水；用来作棺材，则很快腐烂；用来作器具，则容易毁坏；用来作门窗，则脂液不干；用来作柱子，则易受虫蚀，此乃不成材之木。不材之木也，无所可用，故能有如此之寿。”听了此话，庄子说：“树不成材，方可免祸；人不成才，亦可保身也。人皆知有用之用，却不知无用之用也。”弟子恍然大悟，点头不已。人生在世，各有各的活法，不同的标准下，有着不同的价值。有时候看似无用也是用。人不能总是用“利益”来作为唯一的评判标准，天生万物，各有不同，不单为取悦人而存在。树木弯曲，虽不能用，但是却不能妨碍他自由自在的生长，这远比成为栋梁更有用。就像教育孩子，虽然孩子不能成为社会栋梁，但是却不妨碍他发展自己的兴趣，他的成长本身就有价值'
      },
      comment: [
        {
          compony: "人民银行",
          title: "为什么这么多雨",
          user: "小鱼儿",
          address: "来自计算机三班",
          problem: "雨也太多了，电脑受潮了"
        },
        {
          compony: "人民银行",
          title: "为什么这么多雨",
          user: "小鱼儿",
          address: "来自计算机三班",
          problem: "雨也太多了，电脑受潮了"
        },
        {
          compony: "人民银行",
          title: "为什么这么多雨",
          user: "小鱼儿",
          address: "来自计算机三班",
          problem: "雨也太多了，电脑受潮了"
        }
      ]
    };
  },
  beforeMount() {},
  created() {}
};
</script>

<style lang="scss" scoped>
.Htitle{
    font-size: 48rpx;
    line-height: 70rpx;
    font-weight: 600;
    padding-top: 30rpx;
}
.comment-wrap {
  background: #eff4f7;
  padding: 28rpx;
  .content {
    background: #fff;
    padding: 0 38rpx;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 106rpx;
      height: 106rpx;
      font-size: 40rpx;
      border-bottom: 1px solid #e7e7e7;
      .more {
        font-size: 26rpx;
        color: #9a9b9a;
        img {
          width: 14rpx;
          height: 24rpx;
          margin-left: 12rpx;
        }
      }
    }
    .comment {
      padding: 16rpx 0 35rpx 0;
      border-bottom: 1px solid #ededed;
      .company {
        margin-top: 20rpx;
        height: 64rpx;
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #9a9a9a;
        img {
          width: 30rpx;
          height: 30rpx;
          margin-right: 12rpx;
        }
      }
      .title {
        font-size: 30rpx;
        line-height: 44rpx;
      }
    }
    .problem {
      margin-top: 26rpx;
      padding: 30rpx 40rpx;
      font-size: 26rpx;
      color: #a0a59f;
      background: #eff4f7;
      .user{
          line-height: 48rpx;
      }
      .user-problem {
        color: #000;
      }
    }
  }
}
</style>

